<template>
        <div id="myChart" :style="{width: '80vw', height: '80vh'}"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
        data () {
                return {

                }
        },

        methods: {
                initCharts () {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('myChart'));
                        // 绘制图表
                        setTimeout(function () {

                                let option = {
                                        legend: {},
                                        tooltip: {
                                                trigger: 'axis',
                                                showContent: false
                                        },
                                        dataset: {
                                                source: [
                                                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                                                        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                                                        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                                                        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                                                        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                                                ]
                                        },
                                        xAxis: {type: 'category'},
                                        yAxis: {gridIndex: 0},
                                        grid: {top: '55%'},
                                        series: [
                                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                                                {
                                                        type: 'pie',
                                                        id: 'pie',
                                                        radius: '30%',
                                                        center: ['50%', '25%'],
                                                        emphasis: {focus: 'data'},
                                                        label: {
                                                                formatter: '{b}: {@2012} ({d}%)'
                                                        },
                                                        encode: {
                                                                itemName: 'product',
                                                                value: '2012',
                                                                tooltip: '2012'
                                                        }
                                                }
                                        ]
                                };

                                myChart.on('updateAxisPointer', function (event) {
                                        var xAxisInfo = event.axesInfo[0];
                                        if (xAxisInfo) {
                                                var dimension = xAxisInfo.value + 1;
                                                myChart.setOption({
                                                        series: {
                                                                id: 'pie',
                                                                label: {
                                                                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                                                },
                                                                encode: {
                                                                        value: dimension,
                                                                        tooltip: dimension
                                                                }
                                                        }
                                                });
                                        }
                                });

                                myChart.setOption(option);

                        });
                }
        },
        mounted() {
                this.initCharts();
        }
}



</script>

<style scoped>

</style>
